<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useTokenStore } from '@/stores/token.js'
import { useRouter } from 'vue-router';
import * as admin from '@/api/index.js'
const router = useRouter()
const tokenStore = useTokenStore();
import useUserInfoStore from '@/stores/userInfo.js'
const userInfo = useUserInfoStore();

const token_status = tokenStore.token;
const isLoggedIn = ref(true);  // 设置为 true，表示已登录

// 用户信息
const user = ref({
  avatarUrl: 'https://via.placeholder.com/40',
  username: 'John Doe',
});

// 公告信息
const gonggaoTitle = ref('宝宝教育系统即将维护');
const gonggaoContent = ref('亲爱的用户，宝宝教育系统将于今晚23:00进行系统维护，预计持续1小时。请提前保存好学习记录哦~');
const showNotice = ref(false);

// 登出方法
function logout() {
  tokenStore.removeToken()
  userInfo.removeInfo()
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 登录拦截
const lanjie = () => {
  if (token_status) {
    user.value.avatarUrl = userInfo.info.img
    user.value.username = userInfo.info.name
    return true;
  } else {
    router.push('/login')
  }
}

const getUserDate = async () => {
  const param = {
    currentPage: 1
  }
  const result = await admin.findCommunityPost(param)
  console.log(result.data)
  if (result.code == 0) {
    gonggaoTitle.value = result.data.title
    gonggaoContent.value = result.data.content
  } else {
    ElMessage.error(result.msg)
  }
}
getUserDate();
lanjie();
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <!-- 顶部区域 -->
        <el-row class="header-row">
          <!-- 左：标题 -->
          <el-col :span="6" class="header-title">
            宝宝教育管理平台
          </el-col>

          <!-- 右：公告 + 用户信息 -->
          <el-col :span="18" class="header-right">
            <el-row class="right-row">
              <!-- 公告标题按钮 -->
              <el-button 
                type="text" 
                class="gonggao-title" 
                @click="showNotice = true">
                【公告】{{ gonggaoTitle }}
              </el-button>

              <!-- 登录 / 用户信息 -->
              <div v-if="!isLoggedIn">
                <el-button type="primary" @click="isLoggedIn = true">登录</el-button>
              </div>
              <div v-else>
                <el-avatar :src="user.avatarUrl" class="avatar" />
                <span class="user-name">{{ user.username }}</span>
                <el-button type="danger" @click="logout">登出</el-button>
              </div>
            </el-row>
          </el-col>
        </el-row>

        <!-- 弹窗：公告内容 -->
        <el-dialog v-model="showNotice" title="公告" width="30%">
          <p>{{ gonggaoContent }}</p>
        </el-dialog>

        <!-- 菜单栏 -->
        <el-menu mode="horizontal" class="header-menu" background-color="#f4f4f4" 
          :default-active="$route.path" router>
          <el-menu-item index="/indexkechen">课程</el-menu-item>
          <el-menu-item index="/indexstujilv">学习记录</el-menu-item>
          <el-menu-item index="/indexjilv">成长记录</el-menu-item>
          <el-menu-item index="/indexchanpin">产品</el-menu-item>
          <el-menu-item index="/indexorder">历史订单</el-menu-item>
          <el-menu-item index="/indexuser">个人中心</el-menu-item>
        </el-menu>

        <!-- 轮播图 -->
        <el-carousel trigger="click" height="200px" arrow="always" class="carousel">
          <el-carousel-item>
            <img src="https://img1.baidu.com/it/u=201563030,1455102835&fm=253&fmt=auto?w=750&h=500" alt="Image 1">
          </el-carousel-item>
          <el-carousel-item>
            <img src="https://img0.baidu.com/it/u=1227174087,1286973457&fm=253&fmt=auto&app=120&f=JPEG?w=1141&h=800" alt="Image 2">
          </el-carousel-item>
          <el-carousel-item>
            <img src="https://img0.baidu.com/it/u=3478350955,272947572&fm=253&fmt=auto?w=1208&h=800" alt="Image 3">
          </el-carousel-item>
        </el-carousel>
      </el-header>

      <!-- 主体区域 -->
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  position: relative;
  min-height: 100vh;
}

.header {
  background-color: #409eff;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.header-title {
  font-size: 24px;
  color: white;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.right-row {
  display: flex;
  align-items: center;
}

.header-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f4f4f4;
  padding: 10px 0;
  margin-bottom: 10px;
}

.header-menu .el-menu-item {
  color: #409eff;
  font-size: 16px;
}

.avatar {
  margin-right: 10px;
}

.user-name {
  margin-right: 20px;
  color: #ffffff;
  font-weight: bold;
}

.el-button {
  margin-left: 10px;
}

.el-button.danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-content {
  margin-top: 240px;
}

.gonggao-title {
  color: #fff;
  font-weight: bold;
  margin-right: 30px;
  font-size: 16px;
  cursor: pointer;
}
</style>
